<template>
  <div>
    <!-- fixed是布尔类型的属性，对于这种属性而言，它只要写上就是true，不写就是默认值 -->
    <van-nav-bar fixed placeholder title="我的购物车" />
    <!-- 内容cell区域 -->
    <van-cell-group style="margin-bottom:50px">
      <!-- 对着这个cell进行v-for就能生成多个相同的cell -->
      <!-- cell默认无法满足需求，用插槽 -->
      <van-cell v-for="item in list" :key="item.id">
        <!-- 用默认插槽 -->
        <template>
          <div style="display: flex">
            <!-- 一左一右两个盒子 -->
            <van-checkbox v-model="item.goods_state" shape="square">
              <!-- 图片 -->
              <van-image
                width="140"
                height="140"
                fit="cover"
                radius="15"
                :src="item.goods_img"
              />
            </van-checkbox>
            <!-- div是块级元素，默认独占一行 -->
            <div
              style="
                flex: 1;
                margin-left: 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <h4>
                {{ item.goods_name }}
              </h4>
              <div>
                <span style="color: red">￥ {{ item.goods_price }}</span>
                <van-stepper style="float: right" v-model="item.goods_count" />
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 如果是希望行内属性不要写死，用的应该是v-bind -->
    <van-submit-bar :price="totalPrice" :button-text="totalCount">
      <van-checkbox v-model="chkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
// 用axios
import axios from "axios";

export default {
  data() {
    return {
      list: [],
    };
  },

  async created() {
    // 发请求获取购物车数据
    let res = await axios({
      url: "https://www.escook.cn/api/cart",
    });

    this.list = res.data.list;
  },

  // 计算属性
  computed: {

    totalPrice () {

      // 依赖数组里的数据，要遍历数组（reduce没那么方便，反而用forEach好一点）
      /*
      let sum = 0;
      this.list.forEach( v => {

        // 判断是否选中
        if (v.goods_state) {
          // 累加 单价 * 数量
          sum += v.goods_price * v.goods_count
        }
      })

      // 乘以100就能把元转成分
      return sum * 100
      */

      // 下面代码reduce做
      return this.list.reduce((sum, v) => {
        
        if (v.goods_state) {

          sum += v.goods_price * v.goods_count
        }
        return sum 
      }, 0) * 100
    },

    // 全选的计算属性
    chkAll: {
      // 对计算属性取值
      get () {

        // 拿到小选的选中结果，但凡有一个是false结果就是false
        // 所以可以用every
        return this.list.every( v => v.goods_state )
      },

      set (val) {
        // 全选的状态，设置给小选的状态
        this.list.forEach(v => v.goods_state = val)
      }
    },

    // 统计数量的计算属性
    totalCount () {

      let count = 0
      this.list.forEach(v => {
        if (v.goods_state) {
          count += v.goods_count
        }
      })

      return `结算(${count}件)`
    }
  }
  
};
</script>

<style>
</style>